// 项目根组件

import React from 'react'

// 导入路由
import { HashRouter, Route, Link } from 'react-router-dom'
// 导入antdesign及相关组件
import 'antd/dist/antd.css'; 
import { Layout, Menu } from 'antd';
const { Header, Content, Footer } = Layout;
import 'antd/dist/antd.css';

// 导入样式
import './css/app.css'

// 导入路由组件
import AboutContainer from "./components/about/AboutContainer.jsx"
import MovieContainer from "./components/movie/MovieContainer.jsx"
import HomeContainer from './components/home/HomeContainer.jsx'

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return <HashRouter>
      <Layout className="layout" style={{display: 'flex', minHeight: '100%'}}>
        <Header>
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[window.location.hash.split('/')[1]]}>
            <Menu.Item key="home">
              <Link to="/home">首页</Link>
            </Menu.Item>
            <Menu.Item key="movie">
              <Link to="/movie/top_250/1">电影</Link>
            </Menu.Item>
            <Menu.Item key="about">
              <Link to="/about">关于</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content className="site-layout-content">

            <Route path="/home" component={HomeContainer}></Route>
            <Route path="/movie" component={MovieContainer}></Route>
            <Route path="/about" component={AboutContainer}></Route>

        </Content>
        <Footer style={{ textAlign: 'center', height: '20px', paddingTop: '3px'}}>YJH Design ©2021 Created by YJH</Footer>
      </Layout>  
    </HashRouter>
  }
}